import styled from 'styled-components';
import React, { CSSProperties, useEffect, useState } from 'react';
import {
    ProForm,
    ProFormItem,
    ProFormRadio,
    ProFormTextArea,
} from '@ant-design/pro-components';

import { useLayoutContext } from '../../api';
import { SqliteSettings, peerAssistantChat } from '../../services';

import { ImageList } from '../images';

export interface MakeRealPromptsProps {
    style?: CSSProperties;
    inputs: Array<{ url: string }>;
    onResult?: (result: any) => Promise<void>;
}

export const MakeRealPrompts: React.FC<MakeRealPromptsProps> = (props) => {

    const [_peerId, homePath] = useLayoutContext();

    const [settingService, setSettingService] = useState<SqliteSettings>(new SqliteSettings(`${homePath}/rrg01.sqlite`));

    const [provider, setProvider] = useState<{ provider: string, [key: string]: any } | null>(null);

    useEffect(() => {
        settingService.getValueByCategory("ai_settings", "default_setting", '').then((vstr) => {
            if (vstr == '') {
                return;
            }
            console.log(vstr);
            let obj = JSON.parse(vstr);
            setProvider(obj);
        });
    }, []);

    return (
        <Container style={props.style}>
            <ProForm
                initialValues={{
                    systemPrompts: '您是一名专业的Web开发人员，专门从事从低保真度线框构建可工作的网站原型。',
                    userPrompts: '帮我按照以上图片生成前端代码。',
                }}
                onFinish={async (values) => {
                    console.log(values, provider, props.inputs);
                    props.onResult && await props.onResult("开始生成....");
                    let images: any = props.inputs.map((input, index) => {
                        return {
                            type: 'image_url',
                            image_url: {
                                url: input.url
                            }
                        };
                    });
                    //assistant
                    let result = await peerAssistantChat([{
                        content: [{
                            type: 'text',
                            text: values.systemPrompts && values.systemPrompts != '' ? values.systemPrompts : provider.system
                        }],
                        role: 'system'
                    }, {
                        content: images,
                        role: 'user'
                    }, {
                        content: [
                            {
                                type: 'text',
                                text: values.userPrompts
                            },
                        ],
                        role: 'user'
                    }], {
                        provider: {
                            version: 'OpenAIChat',
                            url: `${provider.baseUrl}/v1/chat/completions`,
                            token_key: 'Authorization',
                            token: `Bearer ${provider.apikey}`,
                            options: {}
                        },
                        model: `${provider.model}`,
                        prompt_enhance: false
                    });
                    if (result && result.length > 0 && result[0].content && result[0].content.length > 0) {
                        let textItem: any = result[0].content[0];
                        if (textItem.text) {
                            props.onResult && await props.onResult(textItem.text);
                        }
                    }
                }}
            >
                <ProFormItem label="输入图片" name="inputs">
                    <ImageList images={props.inputs} size={120} ></ImageList>
                </ProFormItem>
                <ProFormTextArea width="xl" label="系统提示词" name="systemPrompts" />
                <ProFormTextArea width="xl" label="输入提示词" name="userPrompts" />
                {/* <ProFormRadio.Group
                    label="输出格式"
                    name="outputType"
                    initialValue="Markdown"
                    options={['PNG', '文本', 'Markdown']}
                /> */}
            </ProForm>

        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    padding: 0 10px 0 0;
`;